<template>
  <el-dialog :title="title" :visible.sync="dialogVisible">
    <el-row>
      <el-col>
        <div class="tree">
          <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
          <div style="max-height: 500px; overflow: auto">
            <v-tree ref="tree" :data="treeData" multiple radio halfcheck select-alone @node-click="()=>{}" />
          </div>
        </div>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="hide">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fetchTree } from '@/api/menu'
import { setRoleMenus, getMenuList } from '@/api/roleResource'

import { recursiveTraverse } from '@/utils/menusUtil'

export default {
  props: {
    scope: {
      type: Number,
      require: true,
      default: 0
    }
  },

  data() {
    return {
      loading: false,
      title: '关联权限',
      dialogVisible: false,
      reject: null,
      resolve: null,
      roleId: null,
      treeData: [],
      filterText: '',
      td: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.searchNodes(val)
    }
  },
  mounted() {
  },
  methods: {
    fetchTree() {
      this.loading = true
      // todo 先简单实现, 后期优化, 合并两个接口
      getMenuList(this.roleId, this.scope).then(res => {
        const idList = res.data
        fetchTree({}, this.scope).then(res => {
          this.loading = false
          if (res.code === 0) {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i]['expanded'] = true
              if (idList.indexOf(res.data[i].id) !== -1) {
                res.data[i].checked = true
              }
              recursiveTraverse(res.data[i], (node) => {
                node['expanded'] = true
                if (idList.indexOf(node.id) !== -1) {
                  node.checked = true
                }
              })
            }
            this.treeData = res.data
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {
          this.loading = false
        })
      })
    },

    open(roleId) {
      this.roleId = roleId
      this.treeData = []
      this.fetchTree()
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },
    handleSave() {
      const checkedList = this.$refs.tree.getCheckedNodes(false, false)
      const idList = []
      for (let i = 0; i < checkedList.length; i++) {
        idList.push(checkedList[i].id)
      }
      setRoleMenus(this.roleId, idList, this.scope).then((res) => {
        if (res.code === 0) {
          this.resolve && this.resolve()
          this.hide()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {

      })
    }
  }
}
</script>

